<template>
  <div>
    <CustomTitle title="7日故障统计" class="mb-[30px]"> </CustomTitle>
    <div class="w-[820px] h-[300px] text-[#E6E6E6] p-[50px] px-[70px] bg-[#1B1B1B] mt-[10px] rounded-[10px] flex items-center">
      <div class="w-[60%] h-full flex justify-around">
        <div class="flex flex-col justify-between">
          <div>
            <div class="text-[33px] text-center">20:00</div>
            <div class="text-[16px] text-center">设备运行市场</div>
          </div>
          <div>
            <div class="text-[33px] text-center">0</div>
            <div class="text-[16px] text-center">设备故障次数</div>
          </div>
        </div>
        <div class="flex flex-col justify-between">
          <div>
            <div class="text-[33px] text-[#F83253] text-center">02:00</div>
            <div class="text-[16px] text-center">设备故障时长</div>
          </div>
          <div>
            <div class="text-[33px] text-center">0</div>
            <div class="text-[16px] text-center">设备故障间隔</div>
          </div>
        </div>
      </div>
      <div class="flex justify-center flex-grow-0 items-center h-full w-[40%]">
        <a-progress strokeColor="#F83253" type="circle" :percent="75" :size="212">
          <template #format="percent">
            <div style="color: #e6e6e6">
              <div class="text-[30px]">{{ percent }}%</div>
              <div class="text-[15px]">故障时长占比</div>
            </div>
          </template>
        </a-progress>
      </div>
    </div>
  </div>  
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>
